<div class="ama-called-element-block" *ngIf="!loading">
    <adf-card-view-arrayitem [property]="cardViewArrayItem" class="called-element-input"
        data-automation-id='activity-name'>
    </adf-card-view-arrayitem>

    <div *ngIf="calledElement">
        <modelingsdk-variable-mapping-type
                [mappingBehavior]="mappingBehavior$ | async"
                [canShowMapVariableOption]="isStaticCalledElement()"
                (mappingBehaviorChange)="onChangeMappingBehavior($event)"></modelingsdk-variable-mapping-type>

        <div *ngIf="isStaticCalledElement() && (canMapVariable$ | async)">
                <div *ngIf="subProcessVariables.length; else noSubProcessVariables">
                    <h5 data-automation-id="input-mapping-header">
                        {{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.INPUT_MAPPING' | translate }}:</h5>
                    <modelingsdk-input-mapping-table [parameters]="subProcessVariables"
                        [processProperties]="editorVariables" [mapping]="(mappings$ | async).inputs || {}"
                        (update)="changeMapping($event, 'inputs')">
                    </modelingsdk-input-mapping-table>

                    <h5 data-automation-id="output-mapping-header">
                        {{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.OUTPUT_MAPPING' | translate }}:</h5>
                    <modelingsdk-output-mapping-table [parameters]="subProcessVariables"
                        [processProperties]="editorVariables" [mapping]="(mappings$ | async).outputs || {}"
                        (update)="changeMapping($any($event), 'outputs')">
                    </modelingsdk-output-mapping-table>
                </div>
        </div>
    </div>

    <ng-template #noSubProcessVariables>
        <h5 data-automation-id="no-subprocess-variables-error">
            {{ 'PROCESS_EDITOR.ERRORS.NO_SUB_PROCESS_VARIABLES' | translate }}
        </h5>
    </ng-template>
</div>

<div class="ama-called-element-block-spinner" *ngIf="loading">
    <mat-spinner></mat-spinner>
</div>
